<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom操作</title>
		<script type="text/javascript">
			function showMe(){
				// 获取表格对象
				var myTable = document.getElementById("myTable");
				// 向console控制台输出对象[不要加引号，输出对象]
				console.info(myTable);
				console.info(myTable.children);
				console.info(myTable.lastChild.lastChild);
				console.info(myTable.children[0].children[3].children[0].innerHTML);
				// 获取一个子节点的值
				var strMsg = myTable.lastElementChild.lastElementChild.firstElementChild.innerHTML;
				var strMsg = myTable.lastElementChild.lastElementChild.firstElementChild.innerHTML;
				// 将获取的值赋值给控件
				document.getElementById("txtMsg").value = strMsg;
			}
			
			function insertNewRow(){
				// 创建一个表格行对象tr
				var tr0 = document.createElement("tr");
				// 创建一行的各个列对象
				var td0 = document.createElement("td");
				// 赋值
				td0.innerHTML = "103";
				tr0.appendChild(td0);
				
				var td1 = document.createElement("td");
				// 赋值
				td1.innerHTML = "赵六";
				tr0.appendChild(td1);
				
				var td2 = document.createElement("td");
				// 赋值
				td2.innerHTML = "02255555555";
				tr0.appendChild(td2);
				
				var td3 = document.createElement("td");
				// 赋值
				td3.innerHTML = "6000";
				tr0.appendChild(td3);
				
				// 将这一行加入到表格对象中
				document.getElementById("myTable").appendChild(tr0);
			}
			
			function  changeMe(){
				// 获取标签对象
				var myTable = document.getElementById("myTable");
				// 通过标签对象的style属性进行改变，style属性下面的可以用css样式属性进行设置即可
				myTable.style.borderColor = "#66AEFF";
				myTable.align = "center";
			}
		</script>
	</head>
	<body>
		<table id="myTable" border="1" cellspacing="0" cellpadding="3px">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>电话号码</th>
				<th>月薪</th>
			</tr>
			<tr>
				<td>100</td>
				<td>张三</td>
				<td>022222222</td>
				<td>4000</td>
			</tr>
			<tr>
				<td>101</td>
				<td>李四</td>
				<td>0223333333</td>
				<td>5000</td>
			</tr>
			<tr>
				<td>102</td>
				<td>王五</td>
				<td>02244444444</td>
				<td>6000</td>
			</tr>
		</table>
		<br />
		<input type="button" name="btn" id="btn" value="获取值" onclick="showMe();" />
		<input type="text" name="txtMsg" id="txtMsg"/>
		<br/>
		<input type="button" name="tbn1" id="tbn1" value="新增一行表格" onclick="insertNewRow()" />
		<input type="button" name="btn2" id="btn2" value="改变表格颜色" onclick="changeMe()" />
	</body>
</html>
